<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="visible"
		:width="screenWidth"
		:fullscreen="mobile === 'mobile'"
    :title="dialogAddOrEdit.title"
    draggable
    @close="closeDialog"
		close-icon="CloseBold"
	>
		<el-descriptions
			class="margin-top"
			:column="itemSpan"
			:size="'large'"
			border
			v-loading="loading"
		>
			<el-descriptions-item label-align="right">
				<template #label>
					<div class="cell-item">
						进场人员
					</div>
				</template>
				{{formData.personName}}
			</el-descriptions-item>
			<el-descriptions-item label-align="right">
				<template #label>
					<div class="cell-item">
						考勤日期
					</div>
				</template>
				{{formData.checkinDate}}
			</el-descriptions-item>
			<el-descriptions-item label-align="right">
				<template #label>
					<div class="cell-item">
						进出标识
					</div>
				</template>
				<el-tag :type="formData.entryExitMarkName === '进场' ? '' : 'info'">{{formData.entryExitMarkName}}</el-tag>
			</el-descriptions-item>
		</el-descriptions>
	
    <template #footer>
      <div class="dialog_footer">
        <el-button @click="closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive, computed} from "vue";
import { checkInDetailEditForm } from "@/api/admin/project/types";
import { getDicts } from "@/store/modules/dict";

import {useScreen} from "@/store/modules/screen";

const screenStore = useScreen()
const mobile = computed(() => ( screenStore.device ));
const screenWidth = ref(900)
const itemSpan = ref(2)

function initScreen(){
	if(mobile.value === 'mobile'){
		screenWidth.value = screenStore.screenWidth;
		itemSpan.value = 1;
	}else {
		screenWidth.value = 900;
		itemSpan.value = 2;
	}
}

const props = defineProps({
  dialogAddOrEdit: {
    type: Object,
    default: () => ({
      visible: false,
      title: "考勤详情信息",
      footBtn: "",
      id: 0,
	  month:''
    }),
  },
	currentSystem: {
		type: String,
		default: () => ('admin')
	},
	getAttendanceInfo: {
		type: Function,
		default: () => (null)
	},
});

const getAttendanceInfo = props.getAttendanceInfo;

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
let visible = ref(props.dialogAddOrEdit.visible);
const formData = reactive<checkInDetailEditForm>({});

onMounted(async () => {
	initScreen()
	
  let tempFormData;
  if (props.dialogAddOrEdit.id) {
		loading.value = true;
    tempFormData = await getAttendanceInfo(props.dialogAddOrEdit.id,props.dialogAddOrEdit.month);
		if(!tempFormData.success){
			ElMessage.error(tempFormData.msg);
			loading.value = false;
			return;
		}
    tempFormData = tempFormData.data;
    Object.assign(formData, tempFormData);
		loading.value = false;
    tempFormData = null;
  }
});

/* 发送当前弹窗关闭 */
function sendClose(query) {
  emit("sendClose",query);
}

/**
 * 关闭弹窗
 */
function closeDialog(query) {
  visible.value = false;
  sendClose(query);
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  formData.id = undefined;
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 50px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}
.dialog_footer {
  // display: flex;
  // justify-content: center;
}

:deep(.el-input) {
  width: 200px;
}

:deep(.el-input__inner) {
  // width: 200px;
}

:deep(.el-input__wrapper) {
  width: 200px;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
.cell-item{
	font-size: 15px;
	color: #938d8d;
}
</style>
